<template>
  <header class="bg-weather-primary shadow-lg sticky top-0 z-10">
    <nav class="container flex flex-col sm:flex-row items-center gap-4 text-white py-6">
      <RouterLink to="/weather" class="router-link-active router-link-exact-active">
        <div class="flex items-center gap-3">
          <i class="fa-solid fa-sun text-2xl"></i>
          <p class="text-2xl">天气预报</p>
        </div>
      </RouterLink>
      <div class="flex gap-1 items-center" v-if="locationWeather">
          <h4 class="text-lg leading-7">{{ locationWeather.city }}</h4>
          <span class="text-sm leading-3">{{ locationWeather.weather }} {{locationWeather.tem}}℃</span>
          <span class="text-sm leading-3">{{ locationWeather.winddirection }}风 {{ locationWeather.windpower }} 级</span>
      </div>
      <div class="flex gap-3 flex-1 justify-end">
        <i class="fa-solid fa-plus text-xl hover:text-weather-secondary duration-150 cursor-pointer" 
        v-if="!isCityExist(route.query.adcode)&&route.fullPath !== '/weather'" @click="addCity(route.params.cityName,route.query.adcode)"></i>
        <i class="fa-solid fa-circle-info text-xl hover:text-weather-secondary cursor-pointer duration-1000"
          @click="toggleMask"></i>
      </div>
    </nav>
  </header>
  <div class="flex flex-col min-h-screen bg-weather-primary" >
    <router-view/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useMaskStore } from '../stores/maskControl.js'
import { RouterLink, RouterView,useRoute} from 'vue-router'
import { localStorageStore } from '../stores/localStroge.js'
const { cityName, cityAdcode,locationWeather } = storeToRefs(localStorageStore())
const { isCityExist,addCity,getWeatherByIP } = localStorageStore()
const { toggleMask } = useMaskStore()
const route = useRoute()
onMounted(async () => {
  getWeatherByIP()
})
</script>

<style scoped>
</style>
